<template>
  <div class="about">
    <FormModal :form-configs="formConfigs" :onSubmit="submit" ref="myform" />
    <el-input class="input" v-model="refff" />
    <el-button class="button" @click="dialog">打开form</el-button>
    <el-button @click="update()" class="button">{{ "更新" }}</el-button>
    <el-button @click="printSelected()" class="button">{{ "打印selected" }}</el-button>
    <StdTable :columns="columns" :data="data" :operations="operations" :enable-selection="true" ref="mytable" />
  </div>
</template>
<script setup lang="ts">

const refff = ref('')

import StdTable from '@/components/BaseCompnents/StdTable.vue';
import FormModal from '@/components/BaseCompnents/StdFormModalV1/FormModal.vue';
import axios from 'axios';
import { ref, reactive } from 'vue';
import { FormDataType, type FormConfigItem } from '@/components/BaseCompnents/StdFormModalV1';

const mytable = ref()
const myform = ref()

type DataItem = {
  id: String,
  name: String,
  description: String
}
const columns: Array<TableConfigItem> = [
  {
    columnLabel: 'ID',
    columnProps: 'id',
    columnFixed: 'left'
  },
  {
    columnLabel: '姓名',
    columnProps: 'name'
  },
  {
    columnLabel: '描述',
    columnProps: 'description',
  },
]
const initialData: Array<DataItem> = [
  {
    id: '1',
    name: '陈博荃',
    description: '你的爸爸'
  },
  {
    id: '2',
    name: '陈博荃2',
    description: '你的爸爸2'
  },
]
const data = ref([] as Array<DataItem>)
data.value = initialData

// 操作按钮
const operations: Array<OperationItem<DataItem>> = [
  {
    buttonType: 'primary',
    buttonCallback: (row: DataItem) => {
      console.log(row)
    },
    buttonText: '打印本行',
    needConfirm: false,
    disabled: (args: DataItem) => {
      return args.id === '1';
    }
  },
  {
    buttonType: 'danger',
    buttonCallback: (row: DataItem, arg = refff.value) => {
      console.log(arg)
    },
    buttonText: '打印传入参数',
    needConfirm: true
  },
]

const update = () => {
  console.log(selected)
  const dat: Array<DataItem> = [
    {
      id: '1',
      name: '陈博荃',
      description: '你的爸爸'
    },
    {
      id: '2',
      name: '陈博荃2',
      description: '你的爸爸3'
    },
    {
      id: '3',
      name: '陈博荃3',
      description: '你的好爸爸'
    },
  ]
  data.value = dat;
  return dat;
}

const selected: Array<any> = []
const printSelected = () => {
  console.log(mytable.value.itemSelected)
}

const formConfigs: Array<FormConfigItem> = [
  {
    label: '姓名',
    key: 'name',
    initialValue: '',
    valueType: FormDataType.STRING
  },
  {
    label: '年龄',
    key: 'age',
    initialValue: 18,
    valueType: FormDataType.NUMBER
  },
  {
    label: '性别',
    key: 'gender',
    initialValue: 'm',
    getOption: async () => {
      // 使用setTimeout模拟网络请求的延迟
      await new Promise(resolve => setTimeout(resolve, 1000));
      const responseData = [{
        label: '男',
        value: 'm'
      }, {
        label: '女',
        value: 'f'
      }]
      return responseData;
    },
    valueType: FormDataType.SELECT
  },
  {
    label: '学校',
    key: 'gender',
    initialValue: '',
    getOption: () => [{
      label: '北京交通大学',
      value: 'bjtu'
    }, {
      label: '北京科技大学',
      value: 'bkju'
    }],
    valueType: FormDataType.MULTISELECT
  },
]


const dialog = () => {
  myform.value.revealDialog()
}

const submit = async (formValue: any) => {
  console.log(formValue)
}

</script>
<style>
@media (min-width: 1024px) {
  .about {
    margin: 10px;
  }

  .input {
    width: 200px;
    margin-bottom: 10px;
  }

  .button {
    margin-bottom: 10px;
    margin-left: 10px;
  }
}
</style>
